Ext.Loader.setConfig({
			enabled : true
		})
Ext.Loader.setPath('Ext.ux', '/ssm/js/extjs/packages/ux')
Ext.require(['Ext.grid.*', 'Ext.toolbar.Paging', 'Ext.data.*',
		'Ext.ux.form.SearchField', 'Ext.util.*', 'Ext.selection.CheckboxModel',
		'Ext.state.*', 'Ext.selection.CellModel', 'Ext.ux.CheckColumn']);
Ext.onReady(function() {
	var isEdit = false;
	var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
				clicksToMoveEditor : 1,
				autoCancel : true
			});

	function formatDate(value) {
		return value ? Ext.Date.dateFormat(value, 'Y-m-d') : '';
	}

	Ext.define('MyData', {
				extend : 'Ext.data.Model',
				fields : [{
							name : 'ID',
							type : 'int'
						}, 'NAME', 'AUTHOR', 'PRICE', 'PUBLISHDATE', 'ADDRESS',
						'TYPE_NAME']
			});
	Ext.define('MyType', {
				extend : 'Ext.data.Model',
				fields : [{
							name : 'TYPE',
							type : 'int'
						}, 'TYPE_NAME']
			});
	Ext.define('MyCity', {
				extend : 'Ext.data.Model',
				fields : [{
							name : 'CITY_NO',
							type : 'int'
						}, 'CITY_NAME']
			});
	var store = Ext.create('Ext.data.Store', {
				pageSize : 10,
				model : 'MyData',
				remoteSort : true,
				proxy : {
					type : 'ajax',
					url : 'queryBookList',
					reader : {
						root : 'list',
						totalProperty : 'total'
					},
					simpleStoreModel : true
				},
				sorters : [{
							property : 'publishdate',
							direction : 'desc'
						}]
			});
	var type = Ext.create('Ext.data.Store', {
				model : 'MyType',
				remoteSort : true,
				autoLoad : true,
				proxy : {
					type : 'ajax',
					url : 'queryType',
					reader : {
						root : 'list',
						totalProperty : 'total'
					},
					simpleStoreModel : true
				}
			});
	var city = Ext.create('Ext.data.Store', {
				model : 'MyCity',
				remoteSort : true,
				autoLoad : true,
				proxy : {
					type : 'ajax',
					url : 'queryCity',
					reader : {
						root : 'list',
						totalProperty : 'total'
					},
					simpleStoreModel : true
				}
			});
	var selModel = Ext.create('Ext.selection.CheckboxModel');
	var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
				clicksToEdit : 1
			});

	var grid = Ext.create('Ext.grid.Panel', {
		store : store,
		selModel : selModel,
		columnLines : true,
		columns : [{
					text : '基本信息',
					columns : [{
								header : '作者',
								name : 'author',
								id : 'author',
								width : 120,
								dataIndex : 'AUTHOR',
								sortable : true,
								field : {
									allowBlank : false
								}
							}, {
								header : '书名',
								width : 120,
								name : 'name',
								dataIndex : 'NAME',
								sortable : true,
								field : {
									allowBlank : false
								}
							}, {
								header : '价格',
								width : 120,
								name : 'price',
								dataIndex : 'PRICE',
								sortable : true,
								field : {
									xtype : 'numberfield',
									allowBlank : false
								}
							}, {
								header : '出版日期',
								width : 120,
								name : 'publishdate',
								dataIndex : 'PUBLISHDATE',
								sortable : true,
								render : formatDate,
								field : {
									xtype : 'datefield',
									format : 'y-m-d'
								}
							}, {
								header : '出版地址',
								width : 120,
								name : 'address',
								id : 'address',
								dataIndex : 'ADDRESS',
								sortable : true,
								field : {
									xtype : 'combobox',
									id : 'addr',
									typeAhead : true,
									triggerAction : 'all',
									queryMode : 'local',
									selectOnTab : true,
									store : city,
									displayField : 'CITY_NAME',
									valueField : 'CITY_NO',
									editable : true,
									listClass : 'x-combo-list-small',
									listeners : {
										select : function(combo, record, index) {
											isEdit = true;
										}
									}

								}
								//,renderer:rendererData
							}]
				}, {
					text : '类型',
					width : 120,
					name : 'type',
					dataIndex : 'TYPE_NAME',
					sortable : true,
					field : {
						xtype : 'combobox',
						id : 'types',
						typeAhead : true,
						triggerAction : 'all',
						queryMode : 'local',
						selectOnTab : true,
						store : type,
						displayField : 'TYPE_NAME',
						valueField : 'TYPE',
						editable : true,
						listClass : 'x-combo-list-small',
						listeners : {
							select : function(combo, record, index) {
								isEdit = true;
							}
						}

					}
					//,renderer:rendererData2
				}],
		width : '100%',
		title : 'grid分页',
		disableSelection : false,
		frame : true,
		loadMask : true,
		renderTo : 'demo',
		viewConfig : {
			id : 'gv',
			trackOver : false,
			stripeRows : false

		},
		dockedItems : [{
			dock : 'top',
			xtype : 'toolbar',
			items : [{
						itemId : 'Button',
						text : '显示所选',
						tooltip : 'Add a new row',
						iconCls : 'add',
						handler : function() {
							var record = grid.getSelectionModel()
									.getSelection();
							if (record.length == 0) {
								Ext.MessageBox.show({
									title : "提示",
									msg : "请先选择您要操作的行!"
										// icon: Ext.MessageBox.INFO
									})
								return;
							} else {
								var ids = "";
								for (var i = 0; i < record.length; i++) {
									ids += record[i].get("ID")
									if (i < record.length - 1) {
										ids = ids + ",";
									}
								}
								Ext.MessageBox.show({
									title : "所选ID列表",
									msg : ids
										// icon: Ext.MessageBox.INFO
									})
							}
						}
					}, {
						width : 300,
						fieldLabel : '搜索',
						labelWidth : 50,
						xtype : 'searchfield',
						store : store
					}, {
						xtype : 'button',
						text : '新建',
						icon : '/ssm/js/extjs/build/classic/theme-neptune/resources/images/tree/drop-add.png',
						handler : function() {
							rowEditing.cancelEdit();
							var panelStore = this.up("grid").getStore();
							var panelModel = this.up("grid")
									.getSelectionModel();
							panelStore.insert(0, panelModel);
							rowEditing.startEdit(0, 0);

						}
					}, {
						xtype : 'button',
						text : '删除',
						handler : function() {
							alert('删除未建立');
						}
					}]

		}, {
			dock : 'bottom',
			xtype : 'pagingtoolbar',
			store : store,
			pageSize : 25,
			displayInfo : true,
			displayMsg : '显示 {0} - {1} 条，共计 {2} 条',
			emptyMsg : '没有数据'
		}],
		plugins : [cellEditing]
	});
	store.loadPage(1);
	grid.on('edit', onEdit, this);

	function onEdit() {
		var record = grid.getSelectionModel().getSelection()[0];
		// 这里进行异步操作，关于Extjs的异步操作这里不做演示，仅列出所有值。
		var id = record.get('ID');
		var name = record.get('NAME');
		var author = record.get('AUTHOR');// 注意，这里得到的是id值，而不是name值,如果没有修改作者，那么得到的值是默认显示的字符串，这个需要在服务端进行判断并处理。
		var price = record.get('PRICE');
		var type = record.get('TYPE_NAME');
		var address = record.get('ADDRESS');
		var publishdate = Ext.Date.dateFormat(record.get('PUBLISHDATE'),
				'Y-m-d');
		var checked = record.get('checked');
		/*
		 * Ext.MessageBox.show({ title : "修改的数据为", msg : id + "\r\n" + author +
		 * "\r\n" + price + "\r\n" + type + "\r\n" + publishdate, icon :
		 * Ext.MessageBox.INFO, buttons : Ext.Msg.OK })
		 */
		Ext.Ajax.request({
					url : 'update',
					params : {
						ID : id,
						NAME : name,
						AUTHOR : author,
						PRICE : price,
						TYPE : type,
						ADDRESS : address,
						PUBLISHDATE : publishdate
					},
					method : 'get',
					success : function(response, options) {
						var re = Ext.util.JSON.decode(response.responseText)
						if (re.success) {
							Ext.MessageBox.alert('提示结果', re.msg);
						} else {
							Ext.MessageBox.alert('提示结果', re.msg);
						}
					}
				});
		store.reload();
	}

	function rendererData(value, metadata, record) {
		if (isEdit) {
			var index = cbstore.find(Ext.getCmp('addr').valueField, value);
			var record = cbstore.getAt(index);
			return record.data.name;
		} else {
			return value;
		}
	}
	function rendererData2(value, metadata, record) {
		if (isEdit) {
			var index = cbstore.find(Ext.getCmp('types').valueField, value);
			var record = cbstore.getAt(index);
			return record.data.name;
		} else {
			return value;
		}
	}

	var addwin = Ext.create('');
})
